<template>
	<view class="contain">
		<scroll-view scroll-y>
			<view style="height: 40rpx"></view>
			<view class="h-timeline-item" v-for="(item, index) in versionArry" :key="index">
				<view class="h-item-left">
					<view class="h-v-time">{{ item.time }}</view>
					<view class="h-v-text">{{ item.version }}</view>
				</view>

				<view class="h-item-center">
					<view class="h-center-point">{{ versionArry.length - index }}</view>
					<view class="h-center-line"></view>
				</view>

				<view class="h-item-right">
					<view class="h-right-title">{{ item.title }}</view>
					<view class="h-right-content" v-for="(content, index1) in item.contents" :key="index1">{{ content }}</view>
				</view>
			</view>
			<view style="height: 40rpx"></view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				versionArry: [{
					time: '2020-09-1',
					version: 'V2.0.1',
					title: '常规升级',
					contents: ['[升级]升级基础库，优化输入密码页。', '[适配]适配PC端小程序']
				}, {
					time: '2019-09-2',
					version: 'V2.0.0',
					title: '小程序正式命名为SKey',
					contents: ['[优化]常见问题中，增加对SKey名称由来的说明。']
				}, {
					time: '2019-08-30',
					version: 'V1.5.0',
					title: '正式版',
					contents: [
						'[新增]使用指南页、常见问题页、更新日志页。',
						'[优化]小程序首次使用、密码验证、同步数据等功能的页面；并调整跳转逻辑更加清晰。',
						'[修复]清除数据、格式化数据功能验证主密码，防止误删除'
					]
				}, {
					time: '2019-08-20',
					version: 'V1.0.0',
					title: '正式版发布',
					contents: ['[完成]指纹功能。', '[完成]数据同步功能。', '[修复]大量测试并修复各页面问题。']
				}, {
					time: '2019-08-15',
					version: 'V0.4.0',
					title: '开发版，内测',
					contents: [
						'[完成]完成数据存储结构修改，并完成相关页面重构工作。',
						'[完成]设置中心自定义分类、修改密码、使用指南、关于等页面。',
						'[完成]CryptoJS加解密库的移植、适配小程序等。',
						'[完成]密码验证页、数据加解密处理等。'
					]
				}, {
					time: '2019-08-10',
					version: 'V0.3.0',
					title: '开发版，内测',
					contents: [
						'[完成]首页自定义状态栏，并适配吸顶效果。',
						'[完成]设置中心自定义分类、修改密码、使用指南、关于等页面。',
						'[完成]CryptoJS加解密库的移植、适配小程序等。',
						'[完成]密码验证页、数据加解密处理等。'
					]
				}, {
					time: '2019-08-5',
					version: 'V0.2.0',
					title: '初始开发版上线，开始内测',
					contents: [
						'[完成]首页功能，并实现吸顶效果。',
						'[完成]账号密码查看页。',
						'[完成]账号密码编辑页，颜色随分类变化。',
						'[完成]账号密码的增删改功能。',
						'[完成]个人设置中心页布局等。'
					]
				}, {
					time: '2019-08-01',
					version: 'V0.1.0',
					title: '正式立项',
					contents: []
				}]
			};
		}
	};
</script>
<style>
	.contain {
		width: 100vw;
		height: 100vh;
		overflow-y: scroll
	}

	.contain::-webkit-scrollbar {

		width: 0;
		height: 0;
		color: transparent;
		display: none
	}

	/* 时间轴样式 */

	.h-timeline-item {
		display: flex;
	}

	.h-item-center {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.h-center-point {
		width: 60rpx;
		height: 60rpx;
		line-height: 60rpx;
		border: 10rpx solid #4ec6c7;
		border-radius: 50%;
		background-color: #16ba98;
		color: #fff;
		text-align: center;
		font-weight: 800;
	}

	.h-center-line {
		flex: 1;
		width: 10rpx;
		background-color: #4ec6c7;
	}

	/* 自定义样式 */

	.h-item-left {
		flex-direction: column;
		display: flex;
		padding: 5rpx 10rpx 0rpx 0rpx;
		width: 150rpx;
	}

	.h-v-time {
		color: #989898;
		font-size: 24rpx;
		text-align: right;
	}

	.h-v-text {
		color: #16ba98;
		font-size: 32rpx;
		font-weight: 800;
		text-align: right;
	}

	.h-item-right {
		flex: 1;
		padding: 10rpx 10rpx 0rpx 10rpx;
	}

	.h-right-title {
		font-weight: 800;
		padding: 5rpx 0rpx;
		color: #404040;
	}

	.h-right-content {
		color: #585858;
		/* text-indent: -2.5em;
  margin-left: 2.5em; */
	}
</style>